<template>
  <view class="kd-order-page">
    <view class="tab-option">
      <uni-segmented-control
        :current="activeTab"
        :values="items"
        @clickItem="handleChangeOrderStatus"
        styleType="text"
        activeColor="#4CC1EE"
      ></uni-segmented-control>
    </view>

    <view v-show="activeTab === 0">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{ height: scrollHeight + 'px' }"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view v-if="isNullData" class="no-data">
          <van-empty description="暂无数据" />
        </view>

        <view
          class="order-item-wrap mb-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="order-top-info">
            <view class="time">接单时间：{{ item.rob_time }}</view>
            <view class="status">
              <van-button type="info" size="mini">{{
                goodsStatusMapText[item.goods_status]
              }}</van-button>
            </view>
          </view>

          <view class="item-content">
            <view class="left">
              <view class="send-wrap mb-20">
                <view class="icon">寄</view>
                <view class="send-info">
                  <view class="top-name">
                    <view class="name">{{ item.a1name }}</view>
                  </view>
                  <view class="bottom-address">{{
                    item.a1areaaddress + item.a1name_address + item.a1doornumber
                  }}</view>
                </view>
              </view>

              <view class="send-wrap receiving-wrap">
                <view class="icon">收</view>
                <view class="send-info">
                  <view class="top-name">
                    <view class="name">{{ item.a2name }}</view>
                  </view>
                  <view class="bottom-address">{{
                    item.a2areaaddress + item.a2name_address + item.a2doornumber
                  }}</view>
                </view>
              </view>
            </view>

            <view class="right">
              <uni-icons type="right" size="18" color="#BFBFC1"></uni-icons>
            </view>
          </view>
        </view>

        <view class="loading" v-if="loading">
          <van-loading color="#0091FF" size="34px" />
        </view>
      </scroll-view>
    </view>

    <view v-show="activeTab === 1">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{ height: scrollHeight + 'px' }"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view v-if="isNullData" class="no-data">
          <van-empty description="暂无数据" />
        </view>

        <view
          class="order-item-wrap mb-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="order-top-info">
            <view class="time">取件时间：{{ item.picked_time }}</view>
            <view class="status">
              <van-button type="info" size="mini">{{
                goodsStatusMapText[item.goods_status]
              }}</van-button>
            </view>
          </view>

          <view class="item-content">
            <view class="left">
              <view class="send-wrap mb-20">
                <view class="icon">寄</view>
                <view class="send-info">
                  <view class="top-name">
                    <view class="name">{{ item.a1name }}</view>
                  </view>
                  <view class="bottom-address">{{
                    item.a1areaaddress + item.a1name_address + item.a1doornumber
                  }}</view>
                </view>
              </view>

              <view class="send-wrap receiving-wrap">
                <view class="icon">收</view>
                <view class="send-info">
                  <view class="top-name">
                    <view class="name">{{ item.a2name }}</view>
                  </view>
                  <view class="bottom-address">{{
                    item.a2areaaddress + item.a2name_address + item.a2doornumber
                  }}</view>
                </view>
              </view>
            </view>

            <view class="right">
              <uni-icons type="right" size="18" color="#BFBFC1"></uni-icons>
            </view>
          </view>
        </view>

        <view class="loading" v-if="loading">
          <van-loading color="#0091FF" size="34px" />
        </view>
      </scroll-view>
    </view>

    <view v-show="activeTab === 2">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{ height: scrollHeight + 'px' }"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view v-if="isNullData" class="no-data">
          <van-empty description="暂无数据" />
        </view>

        <view
          class="order-item-wrap mb-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="order-top-info">
            <view class="time">完成时间：{{ item.finish_time }}</view>
            <view class="status">
              <van-button type="info" size="mini">{{
                goodsStatusMapText[item.goods_status]
              }}</van-button>
            </view>
          </view>

          <view class="item-content">
            <view class="left">
              <view class="send-wrap mb-20">
                <view class="icon">寄</view>
                <view class="send-info">
                  <view class="top-name">
                    <view class="name">{{ item.a1name }}</view>
                  </view>
                  <view class="bottom-address">{{
                    item.a1areaaddress + item.a1name_address + item.a1doornumber
                  }}</view>
                </view>
              </view>

              <view class="send-wrap receiving-wrap">
                <view class="icon">收</view>
                <view class="send-info">
                  <view class="top-name">
                    <view class="name">{{ item.a2name }}</view>
                  </view>
                  <view class="bottom-address">{{
                    item.a2areaaddress + item.a2name_address + item.a2doornumber
                  }}</view>
                </view>
              </view>
            </view>

            <view class="right">
              <uni-icons type="right" size="18" color="#BFBFC1"></uni-icons>
            </view>
          </view>
        </view>

        <view class="loading" v-if="loading">
          <van-loading color="#0091FF" size="34px" />
        </view>
      </scroll-view>
    </view>
    <van-toast id="van-toast"/>
  </view>
</template>

<script>
import Toast from "@/wxcomponents/vant/toast/toast";
const app = getApp();

export default {
  data() {
    return {
      activeTab: 0,
      scrollHeight: 600,
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      hasMoreData: false,
      isNullData: false,
      list: [],
      goodsStatusMapText: {
        1: "待取件",
        2: "配送中",
        3: "已完成",
      },
      items: ["待取件", "配送中", "历史订单"],
    };
  },
  methods: {
    handleChangeOrderStatus(res) {
      const { currentIndex } = res;

      this.activeTab = currentIndex;
      this.handleInitPageInfo();
      this.handleGetList();
    },
    handleInitPageInfo() {
      this.pageIndex = 1;
      this.hasMoreData = false;
      this.isNullData = false;
      this.list = [];
    },
    handleLoadMore() {
      const { loading, pageIndex, hasMoreData } = this;

      if (loading === false && hasMoreData) {
        this.loading = true;
        this.isNullData = false;
        this.pageIndex = pageIndex + 1;
        this.handleGetList();
      }
    },
    handleGetList() {
      const { activeTab, pageIndex, pageSize } = this;

      const activeTabMapStatus = {
        0: 1,
        1: 2,
        2: 3,
      };

      this.loading = true;
      app
        .request(
          {
            goods_status: activeTabMapStatus[activeTab],
            page: pageIndex,
            limit: pageSize,
          },
          "/api/logistics/order/express_list"
        )
        .then((res) => {
          const { code, data, msg } = res;
          console.log(res);

          if (code === 1) {
            let getList = data.data || [];
            let list = this.list;

            const newList = list.concat(getList);
            let hasMoreData = true;
            let isNullData = false;

            if (getList.length < pageSize || !getList.length) {
              hasMoreData = false;
            }

            if (pageIndex === 1 && !getList.length) {
              isNullData = true;
            }

            this.hasMoreData = hasMoreData;
            this.isNullData = isNullData;
            this.list = newList;
          } else {
            Toast(msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleToOrderDetail(item) {
      const { oid } = item;
      const that = this;

      uni.navigateTo({
        url: "/pages/kdOrder/detail?oid=" + oid,
        events: {
          refreshList: function () {
            that.handleInitPageInfo();
            that.handleGetList();
          },
        },
      });
    },
  },
  onLoad() {
    const windowInfo = uni.getWindowInfo();
    const { windowHeight } = windowInfo;

    this.scrollHeight = windowHeight - 36;
    this.handleGetList();
  },
};
</script>

<style lang="scss">
.kd-order-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
  .scroll-content {
    padding-top: 20rpx;
    box-sizing: border-box;
    .mb-20 {
      margin-bottom: 20rpx;
    }
    .order-item-wrap {
      position: relative;
      width: 100%;
      min-height: 300rpx;
      background-color: #fff;
      .order-top-info {
        width: 100%;
        height: 84rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #f0f1f6;
        margin-bottom: 22rpx;
        .time {
          color: #999;
          font-size: 26rpx;
        }
        .status {
        }
      }
      .item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 22rpx;
        box-sizing: border-box;
      }

      .order-status {
        position: absolute;
        right: 30rpx;
        top: 20rpx;
        font-size: 24rpx;
        color: #f0ad4e;
        font-weight: bold;
      }
    }
    .left {
      .mb-20 {
        margin-bottom: 20rpx;
      }
      .send-wrap {
        display: flex;
        align-items: center;
        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #f0ad4e;
          font-size: 24rpx;
        }

        .send-info {
          .top-name {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            .name {
              font-size: 28rpx;
              margin-right: 22rpx;
            }
          }
          .bottom-address {
            max-width: 568rpx;
            color: #999999;
            font-size: 24rpx;
          }
        }
      }

      .receiving-wrap {
        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #157fb9;
          font-size: 24rpx;
        }
      }
    }
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
